<template>
    <div>
        <div v-if="propJson.isDynamic">
            <el-tabs type="border-card" :tempInfo="tabContent" v-if="propJson.editFlag">
                <el-tab-pane v-for="(item, index) in labelInfoList" :key="index" :label="item.labelInfoName">
                    {{ item.labelInfoName }}
                </el-tab-pane>
            </el-tabs>

            <div class="dialogEditContainer" v-if="propJson.editFlag">
                <div class="innerTitle"><span>*动态标签页只支持统一配置* 标签页内部编辑，仅在配置的时候展示, 可以拖入组件</span></div>
                <div style="width: 80%;padding-left: 10%">
                    <draggable :list="propJson.dynamicComponentList"
                               animation="300"
                               :force-fallback="true"
                               :group="{name:'lowcode'}"
                               class="draggableClass"
                               item-key="id"
                    >
                        <template #item="{ element }">
                            <div class="itemClass">
                                <component :is="element.component" :propJson="element.propJson" v-if="itemFlag" :commonParam="commonParam" @click.stop="" @dblclick.stop="changeComponentInfoDynamic(element)"/>
                                <component is="CloseCircleOutlined" class="closeClass" @click.stop="" @dblclick.stop="deleteComponentDynamic(element)"/>
                            </div>
                        </template>
                    </draggable>
                </div>
            </div>

            <el-tabs type="border-card" :tempInfo="tabContent" v-if="!propJson.editFlag">
                <el-tab-pane v-for="(item, index) in labelInfoList" :key="index" :label="item.labelInfoName">
                    <div>
                        <component v-for="componentItem in propJson.dynamicComponentList" :is="componentItem.component" :propJson="componentItem.propJson" :commonParam="commonParam">
                            <template v-slot:[itemSlot.slotName]="slotProps" v-for="itemSlot in slotList">
                                <slot :name="itemSlot.slotName" :slotProps="slotProps"></slot>
                            </template>
                        </component>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div v-if="!propJson.isDynamic">
            <el-tabs type="border-card" :tempInfo="tabContent" v-if="propJson.editFlag">
                <el-tab-pane v-for="(item, index) in propJson.tabsInfoList" :key="index" :label="labelInfoList[index].labelInfoName">
                    {{ labelInfoList[index].labelInfoName }}
                </el-tab-pane>
            </el-tabs>

            <div class="dialogEditContainer" v-if="propJson.editFlag" v-for="(item, index) in propJson.tabsInfoList">
                <div class="innerTitle"><span>标签页内部编辑，仅在配置的时候展示, 可以拖入组件</span></div>
                <div class="innerTitle"><span>标签名称：{{labelInfoList[index].labelInfoName}}</span></div>
                <div style="width: 80%;padding-left: 10%">
                    <draggable :list="item.labelContentComponentList"
                               animation="300"
                               :force-fallback="true"
                               :group="{name:'lowcode'}"
                               class="draggableClass"
                               item-key="id"
                    >
                        <template #item="{ element }">
                            <div class="itemClass">
                                <component :is="element.component" :propJson="element.propJson" v-if="itemFlag" :commonParam="commonParam" @click.stop="" @dblclick.stop="changeComponentInfo(element, item)"/>
                                <component is="CloseCircleOutlined" class="closeClass" @click.stop="" @dblclick.stop="deleteComponent(element, item)"/>
                            </div>
                        </template>
                    </draggable>
                </div>
            </div>

            <el-tabs type="border-card" :tempInfo="tabContent" v-if="!propJson.editFlag">
                <el-tab-pane v-for="(item, index) in propJson.tabsInfoList" :key="index" :label="labelInfoList[index].labelInfoName">
                    <div>
                        <component v-for="componentItem in item.labelContentComponentList" :is="componentItem.component" :propJson="componentItem.propJson" :commonParam="commonParam">
                            <template v-slot:[itemSlot.slotName]="slotProps" v-for="itemSlot in slotList">
                                <slot :name="itemSlot.slotName" :slotProps="slotProps"></slot>
                            </template>
                        </component>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import {doThirdServiceValue} from "@/request/lowcode/thirdService";
import draggable from "vuedraggable";
import {deepCopy} from "@/utils/tagCreate";
import {getCommonParamObj} from "@/utils/commonParamUtil";

export default {
    name: "TabsComponent",
    props: ['propJson', 'commonParam'],
    data() {
        return {
            labelInfoList: [],
            itemFlag: true
        }
    },
    components: {
        draggable,
    },
    methods: {
        execThen(resValue, execParam) {
            if (!resValue && this.propJson.editFlag) {
                this.labelInfoList[execParam.id].labelInfoName = "暂无数据"
            } else {
                this.labelInfoList[execParam.id].labelInfoName = resValue
            }
        },
        execCatch(resValue) {

        },
        execThenDynamic(resValue, execParam) {
            console.log("resValue", resValue)
            this.labelInfoList = [];
            for (let index = 0; index < resValue.length; index++) {
                this.labelInfoList.push({
                    id: index,
                    labelInfoName: resValue[index]
                })
            }
        },
        execCatchDynamic(resValue) {

        },
        async doResponseStatic() {
            // 遍历调用
            for (let index = 0; index < this.propJson.tabsInfoList.length; index++) {
                let execParam = {
                    id: index
                }
                doThirdServiceValue(this.propJson.tabsInfoList[index].labelInfo, this.commonParam, this.execThen, this.execCatch, execParam)
            }
        },
        async doResponseDynamic() {
            doThirdServiceValue(this.propJson.dynamicLabelInfo, this.commonParam, this.execThenDynamic, this.execCatchDynamic, null)
        },
        changeComponentInfo(element, item) {
            this.$store.state.currentDrawer = element.drawerComponent;
            this.$store.state.currentDrawerElementId = element.id;
            this.$store.state.currentDrawerTitle = element.title;
            let copyJson = deepCopy(element.propJson)
            this.$store.commit('changeLowCodeDrawerJsonInfo', copyJson)
            this.$store.state.isShowDrawer = true;
            this.$store.state.lowCodeComponentList = item.labelContentComponentList
        },
        deleteComponent(element, item) {
            let colList = item.labelContentComponentList
            // 获取当前列的LIST
            let index = -1;
            // 遍历当前列表，删除元素ID对应的数据
            for (let i = 0; i < colList.length; i++) {
                if (colList[i].id === element.id) {
                    index = i;
                }
            }
            if (index >= 0) {
                item.labelContentComponentList.splice(index, 1);
            }
        },
        changeComponentInfoDynamic(element) {
            this.$store.state.currentDrawer = element.drawerComponent;
            this.$store.state.currentDrawerElementId = element.id;
            this.$store.state.currentDrawerTitle = element.title;
            let copyJson = deepCopy(element.propJson)
            this.$store.commit('changeLowCodeDrawerJsonInfo', copyJson)
            this.$store.state.isShowDrawer = true;
            this.$store.state.lowCodeComponentList = this.propJson.dynamicComponentList
        },
        deleteComponentDynamic(element) {
            let colList = this.propJson.dynamicComponentList
            // 获取当前列的LIST
            let index = -1;
            // 遍历当前列表，删除元素ID对应的数据
            for (let i = 0; i < colList.length; i++) {
                if (colList[i].id === element.id) {
                    index = i;
                }
            }
            if (index >= 0) {
                this.propJson.dynamicComponentList.splice(index, 1);
            }
        }
    },
    created() {
        if (this.propJson.isDynamic) {
            this.doResponseDynamic()
        } else {
            for (let index = 0; index < this.propJson.tabsInfoList.length; index++) {
                this.labelInfoList.push({
                    id: index,
                    labelInfoName: ""
                })
            }
        }
    },
    computed: {
        tabContent() {
            if (this.propJson.isDynamic) {
                this.doResponseDynamic();
            } else {
                this.doResponseStatic();
            }
        },
        slotList() {
            let res = getCommonParamObj(this.commonParam, "templateSlotInfo")
            return res.variableValue;
        }
    }
}
</script>

<style scoped lang="less">
.dialogEditContainer {
    //width: 100%;
    border: 1px solid #dcdfe6;
    .innerTitle {
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .itemClass {
        position: relative;
        transition: box-shadow 0.3s ease;
        margin-bottom: 0.3%;
        .closeClass {
            display: none;
        }
    }
    .itemClass:hover {
        cursor: pointer;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
        .closeClass {
            position: absolute;
            color: #e76565;
            top: 2px;
            right: 2px;
            display: block;
        }
    }
}
</style>